
<template>
  <div>
    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
    >
      <el-table-column type="index" label="序号" width="70" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="磅房名称" min-width="200px"></el-table-column>
      <el-table-column prop="poundSchedule.shiftSetting" label="交班设置" min-width="300px"></el-table-column>
        <el-table-column prop="state" label="状态"  sortable="custom" width="100px" align="center">
            <template slot-scope="scope">
                <section class="activate-state" v-if="scope.row.state===1">
                    <i></i>
                     {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
                <section class="inactive-state" v-else>
                    <i></i>
                {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
            </template>
        </el-table-column>

      <el-table-column prop="address" label="操作" width="223">
        <template slot-scope="scope">
            <el-link type="primary" :underline="false" @click="editState(scope.row)"  v-show="scope.row.state === 0" v-if="hasPermission('basis:poundsche:modifyState')"
            >启用</el-link
            >
            <el-link type="primary" :underline="false" @click="editState(scope.row)" v-show="scope.row.state === 1" v-if="hasPermission('basis:poundsche:modifyState')"
            >禁用</el-link
            >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handlerSizeChange"
      @current-change="handleCurrentChange"
      :page-size="page.pageSize"
      :current-page="page.pageNo"
      layout="total,sizes,prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <EditForm ref="editForm" @refreshDataList="refreshList"></EditForm>
    <PoundscheEditForm  ref="poundscheEditForm" @refreshDataList="refreshList"></PoundscheEditForm>

    <!-- <RecordForm ref="recordForm"></RecordForm> -->
  </div>
</template>
<script>
import EditForm from './editForm'
import PoundscheEditForm from './PoundscheEditForm'
import {modifyState} from '@/api/weightingManagent/poundroom.js'

export default {
  components: {
    EditForm,
    PoundscheEditForm
  },
  data () {
    return {
      id: '',
      name: '',
      poundSchedule: {
        shiftSetting: ''
      },
      shiftSetting: '',
      state: 0,
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      loading: false
    }
  },
  activated () {
    this.refreshList()
  },
  methods: {
    // 获取数据列表
    refreshList () {
      this.loading = true
      this.$http({
        url: '/basis/poundroom/list',
        method: 'get',
        params: {
          'pageNo': this.pageNo,
          'pageSize': this.pageSize,
          'orderBy': this.orderBy
        }
      }).then(({data}) => {
        if (data && data.success) {
          this.tableData = data.page.list
          this.total = data.page.count
          this.loading = false
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageNo = 1
      this.refreshList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageNo = val
      this.refreshList()
    },
    // 多选
    selectionChangeHandle (val) {
      this.dataListSelections = val
    },
    // 排序
    sortChangeHandle (obj) {
      if (obj.order === 'ascending') {
        this.orderBy = obj.prop + ' asc'
      } else if (obj.order === 'descending') {
        this.orderBy = obj.prop + ' desc'
      } else {
        this.orderBy = ''
      }
      this.refreshList()
    },
    // 排班
    editschedule (id, row) {
      this.$refs.poundscheEditForm.init('edit', id, row)
    },
    // 状态修改
    editState (row) {
      let state = 0
      if (row.state === 0 || row.state === -1) {
        state = 1
      } else if (row.state === 1) {
        state = 0
      }
      this.$confirm('是否修改状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        modifyState({
            id: row.id,
            state: state,
            effectTimeStamp: row.effectTimeStamp,
            'poundSchedule.id': row.poundSchedule.id,
            'poundSchedule.state': state,
            'poundSchedule.effectTimeStamp': row.poundSchedule.effectTimeStamp
          }
        ).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.refreshList()
          }
        })
      })
    },
    // 查看
    view (id) {
      this.$refs.editForm.init('view', id)
    },
    resetSearch () {
      this.$refs.searchForm.resetFields()
      this.refreshList()
    },
    showRight (row) {
      console.log(row)
      this.rightVisible = true
      this.$nextTick(() => {
        this.$refs.dictValueList.refreshList(row.id)
      })
    },
    handlerSizeChange(e){
      this.pageSize=e
      this.refreshList()
    },
    handleCurrentChange (e) {
      this.pageNo=e
      this.refreshList()
    },
    closeRight () {
      this.rightVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table .success-row {
  background: #f0f9eb;
}
::v-deep .el-table .warning-row {
  background: #f7f7f7;
}
</style>
